<template>
  <div class="container">
    <el-image :src="imgUrl"></el-image>
    <div class="error-msg">
      <h1>404</h1>
      <P>页面正在开发中...</P>
      <el-button type="primary">
        <el-link :underline="false" href="/">回到首页</el-link>
      </el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: 'https://gitee.com/zhangzhonghuan/myPicgo/raw/master/94ada608-de94-40b9-a833-bcad8d2d3d15.png'
    }
  }

}
</script>
<style lang="less" scoped>
.container {
  width: 900px;
  height: 360px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  display: float;
  box-shadow: 0 0 5px 3px rgba(24, 23, 23, 0.1);
}
.el-image {
  width: 450px;
  height: 360px;
  display: block;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  background-color: #49b1f5;
  float: left;
}
.error-msg {
  width: 450px;
  height: 360px;
  float: right;
  text-align: center;
  position: relative;
  h1 {
    font-size: 8em;
  }
  p {
    font-size: 2em;
    position: absolute;
    left: 50%;
    bottom: 30%;
    transform: translateX(-50%);
  }
}
.el-link.el-link--default {
  color: #fff;
}
</style>
